import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_wechat/constants.dart';

class MySelfPage extends StatefulWidget {
  @override
  _MySelfPageState createState() => _MySelfPageState();
}

class _MySelfPageState extends State<MySelfPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        actions: <Widget>[
          IconButton(
              icon: Icon(photographIcon, size: 16, color: Colors.black),
              onPressed: null),
        ],
      ),
      body: Container(
        color: Color(0xffEDEDED),
        child: Column(
            children: <Widget>[
              Container(
                alignment: Alignment.center,
                height: 100.0,
                color: Colors.white,
                width: double.maxFinite,
                padding: EdgeInsets.symmetric(horizontal: 20.0),
                child: _HeadWidget(),
              ),
              Container(height: 20.0, color: Colors.white),
              const SizedBox(height: 10.0),
              _ServiceItemWidget(
                  icon: Icon(payIcon, color: Colors.green),
                  title: "支付",
                  onTap: () {}),
              const SizedBox(height: 10.0),
              _ServiceItemWidget(
                  icon: Icon(startIcon, color: Colors.brown),
                  title: "收藏",
                  onTap: () {}),
              _ServiceItemWidget(
                  icon: Icon(photoIcon, color: Colors.blue),
                  title: "相册",
                  onTap: () {}),
              _ServiceItemWidget(
                  icon: Icon(cardBoxIcon, color: Colors.blueAccent),
                  title: "卡包",
                  onTap: () {}),
              _ServiceItemWidget(
                  icon: Icon(wxIcon, color: Colors.orange),
                  title: "表情",
                  onTap: () {}),
              const SizedBox(height: 10.0),
              _ServiceItemWidget(
                  icon: Icon(settingIcon, color: Colors.blue),
                  title: "设置",
                  onTap: () {}),
            ],
        ),
      ),
    );
  }
}

class _ServiceItemWidget extends StatelessWidget {
  final Icon icon;
  final String title;
  final VoidCallback onTap;

  const _ServiceItemWidget({this.icon, this.title, this.onTap, Key key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final query = MediaQuery.of(context);
    return InkWell(
      onTap: onTap,
      child: Container(
        color: Colors.white,
        height: 55.0,
        width: query.size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                const SizedBox(width: 20.0),
                icon,
                const SizedBox(width: 10.0),
                Container(
                  height: 54.0,
                  width: query.size.width - 60,
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(title, style: TextStyle(fontSize: 16.0)),
                          Icon(Icons.chevron_right, color: Colors.grey)
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Container(
              width: query.size.width - 50,
              alignment: Alignment.centerRight,
              height: 0.6,
              color: Color(0xffEDEDED),
            )
          ],
        ),
      ),
    );
  }
}

class _HeadWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final query = MediaQuery.of(context);
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 66.0,
          height: 66.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.0),
            image: DecorationImage(
              image: AssetImage("assets/images/head.jpg"),
            ),
          ),
        ),
        const SizedBox(width: 12.0),
        Container(
          height: 60.0,
          width: query.size.width - 40 - 12 - 66,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Learn peng",
                  style:
                      TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
              const SizedBox(height: 5.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("微信号: wxp77698663",
                      style: TextStyle(color: Colors.grey[500])),
                  _QRWidget(),
                ],
              )
            ],
          ),
        )
      ],
    );
  }
}

class _QRWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Icon(qRCodeIcon, color: Colors.grey, size: 18.0),
        const SizedBox(width: 7.0),
        Icon(
          Icons.chevron_right,
          color: Colors.grey,
        ),
      ],
    );
  }
}
